<template>
    <div class="playMusic">
        <div class="bg" :style="{backgroundImage:`url(${playDetail.al.picUrl})` }"></div>
        <div class="playTop">
<!--            返回按钮-->
<!--            子组件-->
<!--            https://blog.csdn.net/qq_34129336/article/details/79546077-->
            <div class="back" @click="$emit('back')">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sdf"></use>
                </svg>
            </div>
            <div class="center">
<!--                https://blog.csdn.net/chentao866/article/details/68066430-->
<!--                最上面滚动的标题-->
                <div class="title">
                    <marquee  behavior="scroll" direction="left">{{playDetail.al.name}}</marquee>
                </div>

            </div>
            <div class="share">
<!--                把 aria-hidden="true" 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：-->
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iconfontzhizuobiaozhun20"></use>
                </svg>
            </div>
        </div>
        <div class="playContent" v-show="!isLyric"  @click="isLyric=!isLyric">
<!--            唱片的指针   -->
            <img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ip6.png" alt="">
            <img class="disc" src="@/assets/img/disc-ip6.png" alt="">
            <img class="playImg" :src="playDetail.al.picUrl" alt="">
        </div>
        <div class="playLyric" @click="isLyric=!isLyric" v-show="isLyric" ref="playLyric" >
            <p :class="{active:(currentTime*1000>=item.pre&&currentTime*1000<item.time)}" v-for="(item,i) in $store.getters.lyricList" :key="i">{{item.lyric}}</p>

        </div>
        <div class="progress"></div>
        <div class="playFooter">
            <svg class="icon" aria-hidden="true">
<!--                循环-->
                <use xlink:href="#icon-xunhuan"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
<!--                上一首-->
                <use xlink:href="#icon-shangyishoushangyige"></use>
            </svg>
<!--            播放-->
            <svg v-if="paused" class="icon play" aria-hidden="true" @click="play">
<!--            <svg v-if="isPaused" class="icon play" aria-hidden="true" @click="play">-->
                <use xlink:href="#icon-bofang_huaban"></use>
            </svg>
<!--            停止-->
            <svg v-else class="icon play" aria-hidden="true" @click="play">
                <use xlink:href="#icon-iconstop"></use>
            </svg>
<!--            下一首-->
            <svg class="icon" aria-hidden="true" @click="goPlay(1)">
                <use xlink:href="#icon-xiayigexiayishou"  ></use>
            </svg>
<!--            列表-->
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao1"></use>
            </svg>
        </div>
    </div>
</template>

<script>
import { watch } from 'vue'
import {mapState} from 'vuex'
import { toRef, toRefs } from 'vue'

export default {
    // 传入了参数 是函数
    props:['playDetail','paused','play'],
    // data:{
    //     paused
    // },
//     setup(props){
//         //让后在setup中将用toRefs把props转化成被ref包裹的数据
//         const { paused, playDetail} = toRefs(props);
// // 他是另外一个界面？
//         //这样你就可以在setup中使用str 和 obj两个值了
//         // let mystr = str.value;
//         // let myobj = obj.value;
//
//         let isPaused=paused
//         // paused.value=false
//         paused.value=true
//         console.log("paused.value")
//         console.log(paused.value)
//        //
//        // const goPlay = (num)=>{
//        //      console.log(num)
//        //      console.log(this.playlist)
//        //      console.log(this.playCurrentIndex)
//        //      let index = this.playCurrentIndex+num
//        //      // 暂停的按钮也要。。
//        //      if(index<0){
//        //          // 返回 这首不播了
//        //          index = this.playlist.length -1;
//        //      }else if(index===this.playlist.length){
//        //          // Uncaught TypeError: Cannot read properties of undefined (reading 'playlist')
//        //          // 最后一首播放不了 就放第一首歌
//        //          index = 0
//        //      }
//        //      // ncaught TypeError: 'set' on proxy: trap returned falsish for property 'paused'
//        //      // this.  paused=!this.paused
//        //      console.log( "fir  this.  paused")
//        //      // console.log( this.  paused)
//        //      console.log( paused.value)
//        //      // if(String(this.paused)==='false'){
//        //      //     this.  paused=true
//        //      // }else{
//        //      //     this.  paused=false
//        //      // }
//        //      // Assigned expression type boolean is not assignable to type string
//        //      // this.  paused=!this.paused
//        //      // this.  paused.value=!this.paused.value
//        //     paused.value=!paused.value
//        //      // runtime-core.esm-bundler.js?f6d3:218 Uncaught TypeError: Cannot create property 'value' on boolean 'false'
//        //      // this.  paused.value=!this.paused.value
//        //      // console.log( "this.  paused")
//        //      // console.log( this.  paused)
//        //      console.log("paused.value")
//        //      console.log(paused.value)
//        //      // this.play()
//        //     // setup state
//        //      this.$store.commit('setPlayIndex',index)
//        //  }
//
//         return{
//             isPaused,
//             paused,playDetail,
//             // goPlay,
//             // ...mapState(['lyric','currentTime','playlist','playCurrentIndex'])
//             // 拿不到啊
//             // https://blog.csdn.net/organ_sweet/article/details/114495604
//         }
//     },
    data:function(){
        // console.log("paused")
        // console.log(this.paused)
        // play的话 是一个函数 外面的怎么控制里面的呢。。
        return {
            isLyric:true,
            // paused:paused,
            // paused:this.paused,
            // paused:true
            isPaused:this.paused,
        }
    },
    computed:{
        ...mapState(['lyric','currentTime','playlist','playCurrentIndex']),
    },
    watch:{
        currentTime:function(newValue){
            // console.log(newValue)
            // console.log([this.$refs.playLyric])
            let p = document.querySelector('p.active')
            if(p){
                let offsetTop = p.offsetTop;
                this.$refs.playLyric.scrollTop = p.offsetTop;
                // 歌词的高度
                // 中括号才能看到
                // console.log([p])
            }

        }
    },
    methods:{
        // 放在setup 里面 就能获得 pause
        goPlay(num){
            console.log(num)
            console.log(this.playlist)
            console.log(this.playCurrentIndex)
            let index = this.playCurrentIndex+num
            // 暂停的按钮也要。。
            if(index<0){
                // 返回 这首不播了
                index = this.playlist.length -1;
            }else if(index===this.playlist.length){
                // 最后一首播放不了 就放第一首歌
                index = 0
            }
            // ncaught TypeError: 'set' on proxy: trap returned falsish for property 'paused'
          // this.  paused=!this.paused
            console.log( "fir  this.  paused")
            console.log( this.  paused)
            // if(String(this.paused)==='false'){
            //     this.  paused=true
            // }else{
            //     this.  paused=false
            // }
            // this.isPaused=! this.isPaused
            // this.  paused=!this.  paused
            // this.  paused=true
            this.  isPaused=true
            // this.  paused.value=true
            // 没有的
            console.log( "this.  paused")
            console.log( this.  paused)

            console.log( "this.isPaused")
            // 控制不了。。
            console.log( this.isPaused)
            // Assigned expression type boolean is not assignable to type string
            // this.  paused=!this.paused
            // runtime-core.esm-bundler.js?f6d3:218 Uncaught TypeError: Cannot create property 'value' on boolean 'false'
            // this.  paused.value=!this.paused.value
            // console.log( "this.  paused")
            // console.log( this.  paused)
            // this.play()
            this.$store.commit('setPlayIndex',index)
            this.play()
            // 这里要play的 不然就没有音乐啊。。
        }
    }

}
</script>

<style lang="less" scoped>
.playMusic{
    /*https://www.php.cn/css-tutorial-369982.html*/
    position:fixed;
    /*一直呆在原地*/
    left:0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    .bg{
        position: absolute;
        left:0;
        top: 0;
        width: 100vw;
        height: 100vh;
        /*占满*/
        background-size: auto 100%;
        background-position: center;
        /*filter: blur(60px);*/
        filter: blur(80px);
        /*多模糊一点 字就看的清楚点 */
        /*这个模糊度 字就看得清了*/
        /*filter: blur(1px);*/
        /*filter: blur(10px);*/
        /*1 太小了*/
        /*模糊*/

    }
    .playTop{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 7.5rem;
        height: 1.2rem;
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        padding: 0 0.4rem;
        .icon{
            fill: #fff;
            width: 0.4rem;
            height: 0.4rem;
        }
        marquee{
            width: 5rem;
            flex: 1;
        }
    }
    .playContent{
        position: absolute;
        width:7.5rem;
        height: 7.5rem;
        left: 0;
        top: 1.5rem;
        .needle{
            width:2.5rem;
            height: auto;
            position: absolute;
            left: 3.5rem;
            transform-origin: 0.3rem 0;
            transform: rotate(-10deg);
            transition: all 1s;
            z-index: 10;
        }
        .needle.active{
            width:2.5rem;
            height: auto;
            position: absolute;
            left: 3.5rem;
            transform-origin: 0.3rem 0;
            transform: rotate(15deg);
            transition: all 1s;
            z-index: 10;
        }
        .disc{
            width: 5.5rem;
            height: auto;
            position: absolute;
            left: calc(50% - 2.75rem) ;
            top: 2.5rem;

        }
        .playImg{
            width: 3.4rem;
            height: 3.4rem;
            border-radius: 1.7rem;
            position: absolute;
            left: calc(50% - 1.7rem);
            top: 3.55rem;
        }
    }
    .playFooter{
        width: 7.5rem;
        height: 1.5rem;
        position: absolute;
        left: 0;
        bottom: 0;
        /*整个在最下面*/
        display: flex;
        /*平铺开里面的icons */
        justify-content: space-between;
        align-items: center;
        padding: 0 0.4rem;
        .icon{
            fill: #fff;
            width: 0.5rem;
            height: 0.5rem;
        }
        .play.icon{
            /*播放的icon 大一点*/
            width: 1rem;
            height: 1rem;
        }
    }
    /*@lyric_shadow_width : 0.3px;*/
  /* @lyric_shadow_width : 1px;*/
 /*   @lyric_shadow_width : 0.3px;*/
    @lyric_shadow_width : 0.5px;
   .playLyric {
       /*text-shadow: 0.01px;*/
        /*text-shadow: 0.1px;*/
        /*text-shadow: 1px;*/
        /*text-shadow: 5px 5px 5px #FF0000;*/
        /*text-shadow:-1px 0 white,0 1px white,1px 0 white,0 -1px white;*/
        /* text-shadow: 1px 1px 1px #FF0000;*/
        /* text-shadow: 1px 1px 1px white;*/
        /*text-shadow: 0.1px .1px .1px white;*/

        /*text-shadow: 0.1px .1px .1px black;*/
        /*text-shadow: 0.1px .1px .1px pink;*/
     /*   text-shadow:  @lyric_shadow_width @lyric_shadow_width  @lyric_shadow_width pink;*/
       /* text-shadow:  @lyric_shadow_width @lyric_shadow_width  @lyric_shadow_width black;*/
       /* text-shadow:  @lyric_shadow_width @lyric_shadow_width  @lyric_shadow_width blueviolet;*/
        /*less 变量*/

        position: absolute;
        width: 7.5rem;
        height: 8rem;
        left: 0;
        top: calc(50% - 4rem);
        overflow: scroll;
        text-align: center;
        /*color: #fff;*/
        /*color: lightgray;*/
        color: #e2e2e2;
        padding: 0.2rem 0;

        .active {
            color: red;
        }
    }
}
</style>
